// 初始化变量
// 主题 + hover color
$--theme-primary: var(--primary, rgba(11 ,204 ,39 , 1));
$--theme-white: var(--white, rgba(255, 255, 255, 1)); // 主题白
$--theme-black: var(--black, rgba(0, 0, 0, 1)); // 主题黑

// hover
$--theme-primary-color-hover: var(--primary-color-hover, rgba(255, 255, 255, 1)); // color
$--theme-primary-border-hover: var(--primary-border-hover, rgba(11 ,204 ,39 , 0.5)); // border
$--theme-primary-shadow-hover: var(--primary-shadow-hover, rgba(11 ,204 ,39 , 0.2)); // shadow
$--theme-primary-background-hover: var(--primary-background-hover, rgba(11 ,204 ,39 , 0.1)); //  background

// active
$--theme-primary-color-active: var(--primary-color-active, rgba(11 ,204 ,39 , 0.9)); // color
$--theme-primary-border-active: var(--primary-border-active, rgba(11 ,204 ,39 , 0.9)); // border
$--theme-primary-background-active: var(--primary-background-active, rgba(11 ,204 ,39 , 0.9)); // background
$--theme-primary-shadow-active: var(--primary-shadow-active, rgba(11 ,204 ,39 , 0.2)); // shadow

// disabled
$--theme-primary-color-disabled: var(--primary-color-disabled, rgba(11 ,204 ,39 , 0.1)); // color
$--theme-primary-border-disabled: var(--primary-border-disabled, rgba(11 ,204 ,39 , 0.1)); // border
$--theme-primary-background-disabled: var(--primary-background-disabled, rgba(11 ,204 ,39 , 0.1)); // background
$--theme-primary-shadow-disabled: var(--primary-shadow-disabled, rgba(11 ,204 ,39 , 0.2)); // shadow
// plain
$--theme-primary-background-plain: var(--primary-background-plain, rgba(11 ,204 ,39 , 0.1)); // background
$--theme-primary-border-plain: var(--primary-border-plain, rgba(11 ,204 ,39 , 0.3)); // border
// plain disabled
$--theme-primary-color-plain-disabled: var(--primary-color-plain-disabled, rgba(11 ,204 ,39 , 0.4)); // border
$--theme-primary-border-plain-disabled: var(--primary-border-plain-disabled, rgba(11 ,204 ,39 , 0.15)); // border
$--theme-primary-background-plain-disabled: var(--primary-background-plain-disabled, rgba(11 ,204 ,39 , 0.06)); // border

// 常用类型按钮（主要，成功，信息，警告，危险）
$--theme-primary-hover: var(--primary-hover, rgba(62, 179, 4, 0.8)); //主要hover
$--theme-primary-active: var(--primary-active, rgba(62, 179, 4, 1)); //主要active
$--theme-primary-disabled: var(--primary-disabled, rgba(62, 179, 4, 0.35)); //主要active
// $--theme-primary-plain-background: var(--primary-background-plain, rgba(62, 179, 4, 0.2)); //主要plain-background
// $--theme-primary-plain-border: var(--primary-border-plain, rgba(62, 179, 4, 0.4)); //主要plain-border

// $--theme-success: var(--success, rgba(62, 179, 4, 1)); //成功
// $--theme-success-hover: var(--success-hover, rgba(62, 179, 4, 1)); //成功hover
// $--theme-success-active: var(--success-active, rgba(62, 179, 4, 1)); //成功active

// $--theme-success-background-hover: var(--success-background-hover, rgba(236, 245, 255,1)); //成功hover
// $--theme-warning: var(--warning, rgba(227, 197, 152, 1)); // 警告
// $--theme-warning-hover: var(--warning-hover, rgba(227, 197, 152, 0.6)); // 警告hover
// $--theme-danger: var(--danger, rgba(181, 109, 109, 1)); // 危险
// $--theme-danger-hover: var(--danger-hover, rgba(181, 109, 109, 0.6)); // 危险hover
// $--theme-info: var(--info, rgba(144, 146, 149 , 1)); // 信息
// $--theme-info-hover: var(--info-hover, rgba(144, 146, 149 , 0.6)); // 信息
// $--theme-text-primary: var(--text-primary, #BCBDC1); // 文字
// $--theme-text-regular: var(--text-regular, #808285); // 规则文字
// $--theme-text-secondary: var(--text-secondary, #B8B8B8); // 副标题文字
// $--theme-text-placeholder: var(--text-placeholder, #787A7D); // 提示文字
// $--border-theme-base: var(--theme-base, #bd191b); // 主题边框
// $--border-theme-light: var(--theme-light, #919396); // 阴影深色
// $--border-theme-lighter: var(--theme-lighter, #D6D6D6); // 阴影色浅色
// $--border-theme-extra-light: var(--theme-extra-light, #F5F9FE); // 阴影色浅色



/*
* 参数说明：3a8ee6 58  142 230 1 0.9  1 0.9
* 参数说明：色值   rgb   关联（1：有关联，0：无关联）   主题比值（-：无关联） 强关联 主题比值
* 研发开始时间：2021年7月2日09:28:13
* 研发进度：进行中
*/

/*
// 主题
409eff 64  158 255 // 主题 变量1
// hover
409eff 64  158 255 1 1           // hover color 变量1
c6e2ff 198 226 255 0 - 1 0.5     // hover border-color 变量2
ecf5ff 236 245 255 0 - 1 0.1     // hover background-color 变量3
3a8ee6 58  142 230 1 0.9 1 0.2   // hover box-shadow 变量4
// active
3a8ee6 58  142 230 1 0.9    // active color 变量5
3a8ee6 58  142 230 1 0.9    // active border-color 变量5
3a8ee6 58  142 230 1 0.9    // background border-color 变量6
8cc5ff 140 197 255 0 - 
// el-button--primary
66b1ff 102 177 255 0 - 1 0.8 // hover
66b1ff 102 177 255 0 - 1 1 // active
a0cfff 160 207 255 // disabled
d9ecff 217 236 255 
*/

.zk_theme {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 8px;
    margin-left: 10px;
}

.zk_theme:hover,
.zk_theme:focus {
    background: $--theme-primary-background-hover;
    border: 1px solid $--theme-primary-background-hover;
    color: $--theme-primary;
    box-shadow: $--theme-primary-shadow-hover;
}

.zk_theme:active {
    border: 1px solid $--theme-primary;
}

.zk_theme.zk_disabled {
    color: #C0C4CC;
    cursor: not-allowed;
    background: #fff;
    border-color: 1px solid #EBEEF5;
}

.zk_theme_primary {
    background: $--theme-primary;
    border: 1px solid $--theme-primary;
    color: #fff;
    box-shadow: $--theme-primary-shadow-hover;
}

.zk_theme.zk_theme_primary:hover,
.zk_theme.zk_theme_primary:focus {
    color: #fff;
    background: $--theme-primary-hover;
    box-shadow: 0px 0px 10px $--theme-primary;
}

.zk_theme.zk_theme_primary:active {
    background: $--theme-primary;
    box-shadow: 0px 0px 10px $--theme-primary;
}

.zk_theme_primary.zk_disabled,
.zk_theme_primary.zk_disabled:hover,
.zk_theme_primary.zk_disabled:focus,
.zk_theme_primary.zk_disabled:active {
    background: $--theme-primary-background-disabled;
    border: 1px solid $--theme-primary-border-disabled;
    box-shadow: none;
    color: #fff;
    cursor: not-allowed;
}

.zk_theme_plain {
    background: $--theme-primary;
    border: 1px solid $--theme-primary;
    box-shadow: none;
    color: #fff
}

.zk_theme_white {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid $--theme-primary;
    color: $--theme-primary;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 8px;
}

.zk_theme_white:hover,
.zk_theme_white:focus {
    color: $--theme-primary;
    background: #fff;
    border-color: $--theme-primary;
    box-shadow: 0px 0px 10px $--theme-primary;
}

.zk_theme_white:active {
    color: #fff;
    background: $--theme-primary;
    border-color: $--theme-primary;
    box-shadow: 0px 0px 10px $--theme-primary;
}

.zk_theme_white.zk_disabled,
.zk_theme_white.zk_disabled:hover,
.zk_theme_white.zk_disabled:active,
.zk_theme_white.zk_disabled:focus {
    background: #fff;
    border: 1px solid $--theme-primary-border-disabled;
    box-shadow: none;
    color: $--theme-primary-border-disabled;
    cursor: not-allowed;
}